<template>

  <div class="app-container">
    <div class="page_title">
      <span>登录测试</span>
    </div>
    <div class="page_title" style="position: relative;float: right">
      <el-button :loading="requestLoading" type="primary" @click="handleLogin" style="width: 120px">运行</el-button>
    </div>
    <el-input
      v-model="filename"
      placeholder="Please enter something"
      style="width:300px;"
      prefix-icon="el-icon-document"
    />
    <el-button
      :loading="downloadLoading"
      style="margin-bottom:20px;"
      type="primary"
      icon="el-icon-document"
      @click="handleDownload"
    >
      Export Zip
    </el-button>
    <div class="model_box">
      <div class="sub_title"><span><b>点击运行</b></span></div>
      <el-button :loading="requestLogin" type="primary" @click="handleLogin" style="width: 120px">login（非拦截器）</el-button>
      <el-button :loading="requestLogin" type="primary" @click="handleLoginByinterceptors" style="width: 120px">login(axios拦截器)</el-button>
      <el-button :loading="requestLogin" type="primary" @click="handleVersionInfo" style="width: 120px">版本</el-button>
      <el-button :loading="requestLogin" type="primary" @click="handleDutyInfo" style="width: 120px">duty_info</el-button>
      <el-button :loading="requestLogin" type="primary" @click="handleVersionInfo2" style="width: 120px">版本2</el-button>
    </div>
  </div>
</template>

<script  lang="ts">

import { Component, Vue } from 'vue-property-decorator'
import { getArticles } from '@/api/articles'
import { IArticleData } from '@/api/types'
import { formatJson } from '@/utils'
import { exportTxt2Zip } from '@/utils/zip'
// 新的后端路由
import { getRequest, postRequest } from '@/api/utils/axios'
// 请求的路由
import { doLogin, dutyInfo, versionInfo } from '@/constant/url'
import { cloneDeep } from 'lodash'
import { Message } from 'element-ui'
import request from '@/api/utils/request'
import commonFunc from '@/api/utils/commonFunc'

@Component({
  name: 'ExportZip'
})
export default class extends Vue {
  private list: IArticleData[] = []
  private listLoading = true
  private downloadLoading = false
  private filename = ''
  private requestLogin = false

  private defaultAccountData = {
    username: 'admin',
    password: '123456'
  }

  private reqParams = undefined

  private params = cloneDeep(this.defaultAccountData)

  created() {
    this.fetchData()
  }

  private async fetchData() {
    this.listLoading = true
    const { data } = await getArticles({ /* Your params here */ })
    this.list = data.items
    // Just to simulate the time of the request
    setTimeout(() => {
      this.listLoading = false
    }, 0.5 * 1000)
  }

  private handleDownload() {
    this.downloadLoading = true
    const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date']
    const filterVal = ['id', 'title', 'author', 'pageviews', 'timestamp']
    const list = this.list
    const data = formatJson(filterVal, list)
    if (this.filename !== '') {
      exportTxt2Zip(tHeader, data, this.filename, this.filename)
    } else {
      exportTxt2Zip(tHeader, data)
    }
    this.downloadLoading = false
  }

  private handleVersionInfo() {
    getRequest(versionInfo, this.reqParams).then((response) => {
      if (response.data.retcode === 0) {
        Message({
          message: ('success'),
          type: 'success',
          duration: 5 * 10000
        })
      } else {
        Message({
          message: ('fail'),
          type: 'error',
          duration: 5 * 10000
        })
      }
    })
  }

  private handleDutyInfo() {
    const reqParams = {
      project: 'WMS'
    }
    getRequest(dutyInfo, reqParams).then((response) => {
      if (response.data.retcode === 0) {
        Message({
          message: ('success'),
          type: 'success',
          duration: 5 * 10000
        })
      } else {
        Message({
          message: ('fail'),
          type: 'error',
          duration: 5 * 10000
        })
      }
    })
  }

  private handleVersionInfo2() {
    request({
      url: versionInfo,
      method: 'get'
    }).then((response) => {
      if (response.data === 0) {
        Message({
          message: ('success'),
          type: 'success',
          duration: 5 * 10000
        })
      }
    })
  }

  private async handleLoginByinterceptors() {
    const param = {
      username: 'xxxxx',
      password: '66666'
    }

    const response = await commonFunc.forwardRequest(param)
    if (response.status !== 200) {
      Message({
        message: response.data.message,
        type: 'error',
        duration: 3000
      })
    }

    const response2 = await commonFunc.postRequest('/users/login', param)
    if (response2.status !== 200) {
      Message({
        message: response2.data.message,
        type: 'error',
        duration: 3000
      })
    }

    // request.post(doLogin, param).then((response) => {
    //   if (response.data === 0){}
    // })
  }

  private handleLogin() {
    this.sendRequest()
    this.requestLogin = false
  }

  private sendRequest() {
    // 发送请求
    // const postData = qs.stringify(this.params)
    // let payload = new URLSearchParams()
    // payload.append('username',this.params.username)
    // payload.append('password',this.params.password)
    // postRequest(doLogin, postData).then((response) => {
    postRequest(doLogin, this.params).then((response) => {
      console.log(response)
      if (response.data.code === 200) {
        Message({
          message: ('login success'),
          type: 'success',
          duration: 5 * 10000
        })
      } else {
        Message({
          message: ('login fail'),
          type: 'error',
          duration: 5 * 10000
        })
      }
    })
  }
}

</script>

<style scoped>

</style>
